<template>
  <uni-popup ref="popup" type="bottom" :safe-area="true" :mask-click="true">
    <view class="picker-container">
      <view class="picker-header">
        <text class="cancel-btn" @click="cancel">取消</text>
        <text class="title">选择时间</text>
        <text class="confirm-btn" @click="confirm">确定</text>
      </view>
      <picker-view 
        class="time-picker" 
        :value="timeValue" 
        @change="bindChange"
        :indicator-style="indicatorStyle">
        <picker-view-column>
          <view class="picker-item" v-for="(item, index) in hours" :key="index">
            {{item}}
          </view>
        </picker-view-column>
        <picker-view-column>
          <view class="picker-item" v-for="(item, index) in minutes" :key="index">
            {{item}}
          </view>
        </picker-view-column>
      </picker-view>
    </view>
  </uni-popup>
</template>

<script>
export default {
  name: 'DateTimePicker',
  data() {
    const generateNumbers = (count) => {
      return Array.from({ length: count }, (_, i) => {
        return i.toString().padStart(2, '0')
      })
    }

    return {
      hours: generateNumbers(24),
      minutes: generateNumbers(60),
      timeValue: [0, 0],
      indicatorStyle: 'height: 44px;'
    }
  },
  methods: {
    show(time) {
      if (time) {
        const [hour, minute] = time.split(':')
        this.timeValue = [parseInt(hour), parseInt(minute)]
      }
      this.$refs.popup.open('bottom')
    },
    open(time) {
      this.show(time)
    },
    hide() {
      this.$refs.popup.close()
    },
    bindChange(e) {
      this.timeValue = e.detail.value
    },
    cancel() {
      this.hide()
    },
    confirm() {
      const time = `${this.hours[this.timeValue[0]]}:${this.minutes[this.timeValue[1]]}`
      this.$emit('confirm', time)
      this.hide()
    }
  }
}
</script>

<style>
.picker-container {
  background-color: #fff;
  border-radius: 24rpx 24rpx 0 0;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 999;
}

.picker-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 24rpx 32rpx;
  border-bottom: 1rpx solid #eee;
}

.title {
  font-size: 32rpx;
  color: #333;
}

.cancel-btn, .confirm-btn {
  font-size: 32rpx;
  padding: 12rpx;
}

.cancel-btn {
  color: #666;
}

.confirm-btn {
  color: #007AFF;
}

.time-picker {
  width: 100%;
  height: 480rpx;
  background-color: #fff;
}

.picker-item {
  line-height: 44px;
  text-align: center;
  font-size: 32rpx;
  color: #333;
  display: flex;
  align-items: center;
  justify-content: center;
}

.uni-popup__mask {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.4);
  z-index: 998;
}
</style> 